import React from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Statistic, Card, Row, Col, Button, Input, Menu, Space, Table, Dropdown, Tabs, message,Popconfirm,Divider } from 'antd';
import { connect } from 'umi';
import { ArrowUpOutlined, ArrowDownOutlined, SyncOutlined, DownOutlined, RightOutlined } from '@ant-design/icons';
import moment from 'moment';

const { TabPane } = Tabs;
const { Search } = Input;
const currControl = "Edu_CashApply";
class ViewPage extends React.Component<any, any> {
    constructor(props: any) {
        super(props);
        this.state = {
            loading: false,
            dataSource: [],
            visible: false,
            selectedRowKeys: [],
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            payload: {},
            record: {},
            keywords: ''
        }
    }
    componentDidMount() {
        this.fetchDatas();
    }
    fetchDatas = () => {
        this.setState({ loading: true });
        const { pageIndex, pageSize, keywords } = this.state;
        this.props.dispatch({
            type: "Abp/getList",
            payload: { SkipCount: (pageIndex - 1) * pageSize, MaxResultCount: pageSize, keywords },
            control: currControl
        }).then(() => {
            var resp = this.props.response;
            if (resp && resp.result) {
                var dataSource = resp.result.items;
                this.setState({ loading: false, dataSource, totalCount: resp.result?.totalCount });
            }
        });
    }
    onSelectChange = (selectedRowKeys: any) => {
        this.setState({ selectedRowKeys });
    };
    callback = (key: any) => {
        console.log(key);
    }
    handleAction = (act: string) => {
        const { selectedRowKeys } = this.state;
        if (selectedRowKeys.length <= 0) {
            message.warning("请至少选择一项！")
            return;
        }
    }
    handleMenuClick = (e: any) => {
        this.handleAction(e.key)
    }
    handleAct = (id: any, act: string) => {
        this.props.dispatch({
          type: "Abp/batchAll",
          payload: { ids: [id], act },
          control: currControl
        }).then(() => {
          var resp = this.props.response;
          if (resp && resp.success) {
            message.info("执行成功！")
            this.fetchDatas()
          }
        });
      }
    onSearch = (value: any) => {
        var keywords = this.state.keywords;
        keywords = value;
        this.setState({ keywords }, () => {
            this.fetchDatas();
        });

    }
    swithModel = (visible: boolean, record = null) => {
        this.setState({ visible, record });
      }
    render() {
        const { loading, dataSource, selectedRowKeys, totalCount, pageSize } = this.state;
        const columns = [
            {
                title: '交易单号',
                dataIndex: 'orderNo',
            },
            {
                title: '申请金额（元）',
                dataIndex: 'totalAmt',
                render: (text: string) => (
                    <span>￥ {text}</span>
                )
            },
            {
                title: '会员账号',
                dataIndex: 'totalBeans',
            },
            {
                title: '商户号',
                dataIndex: 'orderNo',
            },
            {
                title: '收款账号',
                dataIndex: 'totalBeans',
            },
            {
                title: '申请时间',
                dataIndex: 'totalBeans',
            },
            {
                title: '处理时间',
                dataIndex: 'totalBeans',
            },
            {
                title: '操作',
                render: (record: any) =>
                    dataSource.length >= 1 ? (
                        <span>
                            <Popconfirm title="确定拒绝?" onConfirm={() => this.handleAct(record.id, 'deny')}>
                                <a>拒绝</a>
                            </Popconfirm>
                            <Divider type="vertical" />
                            <Popconfirm title="确定冻结?" onConfirm={() => this.handleAct(record.id, 'frozen')}>
                                <a>冻结</a>
                            </Popconfirm>
                            <Divider type="vertical" />
                            <a onClick={() => this.swithModel(true, record)}>明细</a>
                        </span>
                    ) : null,
            },
        ]
        const columns2 = [
            {
                title: '会员账号',
                dataIndex: 'orderNo',
            },
            {
                title: '商户号',
                dataIndex: 'orderNo',
            },
            {
                title: '付款金额（元）',
                dataIndex: 'totalAmt',
                render: (text: string) => (
                    <span>￥ {text}</span>
                )
            },
            {
                title: '退款金额',
                dataIndex: 'totalBeans',
                render: (text: string) => (
                    <span>￥ {text}</span>
                )
            },
            {
                title: '已打款金额',
                dataIndex: 'totalBeans',
                render: (text: string) => (
                    <span>￥ {text}</span>
                )
            },
            {
                title: '待提现金额',
                dataIndex: 'totalBeans',
                render: (text: string) => (
                    <span>￥ {text}</span>
                )
            },
            {
                title: '已冻结金额',
                dataIndex: 'totalBeans',
                render: (text: string) => (
                    <span>￥ {text}</span>
                )
            },
            
        ]
        const rowSelection = {
            selectedRowKeys,
            onChange: this.onSelectChange,
        };
        const menu = (
            <Menu onClick={this.handleMenuClick}>
                <Menu.Item key="examine" icon={<RightOutlined />}>批量审批</Menu.Item>
                <Menu.Item key="completed" icon={<RightOutlined />}>批量完成</Menu.Item>
                <Menu.Item key="delete" icon={<RightOutlined />}>批量删除</Menu.Item>
            </Menu>
        );
        return (
            <PageHeaderWrapper title={false}>
                <Row gutter={[16, 16]}>
                    <Col span={6}>
                        <Card>
                            <Statistic
                                title="交易总额"
                                value={11.28}
                                precision={2}
                                valueStyle={{ color: '#3f8600' }}
                                prefix={<ArrowUpOutlined />}
                                suffix="%"
                            />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <Statistic
                                title="已提现金额"
                                value={11.28}
                                precision={2}
                                valueStyle={{ color: '#3f8600' }}
                                prefix={<ArrowUpOutlined />}
                                suffix="%"
                            />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <Statistic
                                title="待打款金额"
                                value={9.3}
                                precision={2}
                                valueStyle={{ color: '#cf1322' }}
                                prefix={<ArrowDownOutlined />}
                                suffix="%"
                            />
                        </Card>
                    </Col>
                    <Col span={6}>
                        <Card>
                            <Statistic
                                title="已冻结金额"
                                value={9.3}
                                precision={2}
                                valueStyle={{ color: '#cf1322' }}
                                prefix={<ArrowDownOutlined />}
                                suffix="%"
                            />
                        </Card>
                    </Col>
                </Row>
                <Card>
                    <Space style={{ marginBottom: 16 }}>
                        <Button type="primary"
                            onClick={() => this.fetchDatas()}
                            loading={loading}
                            icon={<SyncOutlined />} >刷新</Button>
                        <Dropdown overlay={menu}>
                            <Button>
                                批量操作 <DownOutlined />
                            </Button>
                        </Dropdown>
                        <Search style={{ width: 240 }} placeholder="输入关键词搜索" onSearch={value => this.onSearch(value)} />
                    </Space>
                    <Tabs defaultActiveKey="1" onChange={this.callback}>
                        <TabPane tab="提现审批" key="1">
                            <Table
                                rowKey="id"
                                loading={loading}
                                rowSelection={rowSelection}
                                columns={columns}
                                dataSource={dataSource}
                                pagination={{
                                    onChange: page => {
                                        this.setState({ pageIndex: page }, () => {
                                            this.fetchDatas();
                                        });
                                    },
                                    pageSize,
                                    total: totalCount,
                                }} />
                        </TabPane>
                        <TabPane tab="提现记录" key="2">
                            <Table
                                rowKey="id"
                                loading={loading}
                                rowSelection={rowSelection}
                                columns={columns2}
                                dataSource={dataSource}
                                pagination={{
                                    onChange: page => {
                                        this.setState({ pageIndex: page }, () => {
                                            this.fetchDatas();
                                        });
                                    },
                                    pageSize,
                                    total: totalCount,
                                }} />
                        </TabPane>
                    </Tabs>
                </Card>
            </PageHeaderWrapper>
        )
    }
}

export default connect(({ Abp }: API.IConnectState) => ({
    response: Abp.response,
    currentUser: Abp.currentUser,
}))(ViewPage);
